<template>
  <div class="mine">
    <div class="content">
      <div class="top">
        <div class="top-nav">
          <h2>我的</h2>
          <div class="icons">
            <van-icon
              size="20"
              color="#666"
              name="setting-o"
              @click="goSetting"
            />
            <van-icon size="20" color="#666" name="scan" />
            <van-icon size="20" color="#666" name="envelop-o" />
          </div>
        </div>
        <div class="login">
          <div>
            <van-image
              width="60"
              height="60"
              round
              :src="require('@/assets/images/icons/user.png')"
            ></van-image>
          </div>
          <h2>注册&nbsp;/&nbsp;登录</h2>
        </div>
        <div class="attention">
          <div>
            <p class="num">0</p>
            <p>关注</p>
          </div>
          <div>
            <p class="num">0</p>
            <p>粉丝</p>
          </div>
          <div>
            <p class="num">0</p>
            <p>发布</p>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="sign">
          <div>
            <img src="../assets/images/icons/sign.png" alt="" />
            <span>每日签到</span>
          </div>
          <div>
            <img src="../assets/images/icons/ma.png" alt="" />
            <span>兑换码</span>
          </div>
        </div>
        <div class="my-car">
          <van-cell :border="true" title="我的车" is-link />
        </div>
        <div class="card">
          <van-grid :column-num="4" :border="false" :square="false">
            <van-grid-item
              v-for="(item, index) in iconData"
              :key="index"
              :icon="item.icon"
              :text="item.title"
            />
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iconData: [
        {
          title: "实名认证",
          icon: "/icons/approve.png",
        },
        { title: "我的预约", icon: "/icons/book.png" },
        { title: "我的订单", icon: "/icons/order.png" },
        { title: "我的卡包", icon: "/icons/card.png" },
        {
          title: "我的推荐",
          icon: "/icons/recommend.png",
        },
        {
          title: "我的活动",
          icon: "/icons/activity.png",
        },
        {
          title: "帮助与反馈",
          icon: "/icons/feedback.png",
        },
        { title: "购物车", icon: "/icons/cart.png" },
        {
          title: "我的地址",
          icon: "/icons/address.png",
        },
        {
          title: "在线客服",
          icon: "/icons/service.png",
        },
      ],
    };
  },
  methods: {
    goSetting(event) {
      // this.$router.push("/home/mine/setting");
      console.log(event);
    },
  },
};
</script>

<style lang="scss" src="../assets/css/mine.scss"></style>
<style lang="scss" scoped></style>
